<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运维管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .container {
            padding: 20px;
        }
        .statistics-cards {
            margin-bottom: 20px;
        }
        .statistic-card {
            background: #fff;
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .statistic-value {
            font-size: 24px;
            color: #409EFF;
            margin: 10px 0;
        }
        .task-table {
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <el-tabs v-model="activeTab">
                <!-- 日常运维标签页 -->
                <el-tab-pane label="日常运维" name="daily">
                    <!-- 统计卡片 -->
                    <el-row :gutter="20" class="statistics-cards">
                        <el-col :span="8">
                            <el-card shadow="hover">
                                <div slot="header">
                                    <span>今日任务总数</span>
                                </div>
                                <div class="statistic-value">{{statistics.totalTasks}}</div>
                                <div>较昨日 <span style="color: #67C23A">+2</span></div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card shadow="hover">
                                <div slot="header">
                                    <span>已完成任务</span>
                                </div>
                                <div class="statistic-value">{{statistics.completedTasks}}</div>
                                <div>完成率 <span style="color: #67C23A">{{statistics.completionRate}}%</span></div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card shadow="hover">
                                <div slot="header">
                                    <span>异常任务</span>
                                </div>
                                <div class="statistic-value">{{statistics.abnormalTasks}}</div>
                                <div>异常率 <span style="color: #F56C6C">{{statistics.abnormalRate}}%</span></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <!-- 任务记录表格 -->
                    <el-card>
                        <div slot="header">
                            <span>日常任务记录</span>
                            <el-button style="float: right" type="primary" size="small" @click="addTask">
                                新增任务
                            </el-button>
                        </div>
                        <el-table :data="taskList" style="width: 100%">
                            <el-table-column prop="date" label="日期" width="120"></el-table-column>
                            <el-table-column prop="name" label="任务名称" width="180"></el-table-column>
                            <el-table-column prop="executor" label="执行人" width="120"></el-table-column>
                            <el-table-column prop="status" label="状态">
                                <template slot-scope="scope">
                                    <el-tag :type="getStatusType(scope.row.status)">{{scope.row.status}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="viewTask(scope.row)">查看</el-button>
                                    <el-button type="text" @click="editTask(scope.row)">编辑</el-button>
                                    <el-button type="text" @click="deleteTask(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>

                <!-- 运维计划管理标签页 -->
                <el-tab-pane label="运维计划管理" name="plan">
                    <el-card>
                        <div slot="header">
                            <span>运维计划列表</span>
                            <el-button style="float: right" type="primary" size="small" @click="addPlan">
                                新增计划
                            </el-button>
                        </div>
                        <el-table :data="planList" style="width: 100%">
                            <el-table-column prop="name" label="计划名称" width="180"></el-table-column>
                            <el-table-column prop="type" label="计划类型" width="120"></el-table-column>
                            <el-table-column prop="cycle" label="执行周期" width="120"></el-table-column>
                            <el-table-column prop="executor" label="负责人" width="120"></el-table-column>
                            <el-table-column prop="status" label="状态">
                                <template slot-scope="scope">
                                    <el-tag :type="getPlanStatusType(scope.row.status)">{{scope.row.status}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="viewPlan(scope.row)">查看</el-button>
                                    <el-button type="text" @click="editPlan(scope.row)">编辑</el-button>
                                    <el-button type="text" @click="deletePlan(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'daily',
                    statistics: {
                        totalTasks: 25,
                        completedTasks: 18,
                        completionRate: 72,
                        abnormalTasks: 3,
                        abnormalRate: 12
                    },
                    taskList: [
                        {
                            date: '2024-02-25',
                            name: '空调系统日常检查',
                            executor: '系统自动',
                            status: '已完成'
                        },
                        {
                            date: '2024-02-25',
                            name: '电梯维护检查',
                            executor: '李四',
                            status: '进行中'
                        }
                    ],
                    planList: [
                        {
                            name: '空调系统季度检查计划',
                            type: '定期检查',
                            cycle: '季度',
                            executor: '系统自动',
                            status: '启用'
                        },
                        {
                            name: '电梯月度维护计划',
                            type: '定期维护',
                            cycle: '月度',
                            executor: '李四',
                            status: '停用'
                        }
                    ]
                }
            },
            methods: {
                getStatusType(status) {
                    switch(status) {
                        case '已完成': return 'success';
                        case '进行中': return 'warning';
                        case '异常': return 'danger';
                        default: return 'info';
                    }
                },
                getPlanStatusType(status) {
                    switch(status) {
                        case '启用': return 'success';
                        case '停用': return 'info';
                        case '删除': return 'warning';
                        default: return 'info';
                    }
                },
                addTask() {
                    this.$message.success('新增任务');
                },
                viewTask(row) {
                    this.$message.success('查看任务详情');
                },
                editTask(row) {
                    this.$message.success('编辑任务');
                },
                deleteTask(row) {
                    this.$confirm('确认删除该任务?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('删除成功');
                    });
                },
                addPlan() {
                    this.$message.success('新增计划');
                },
                viewPlan(row) {
                    this.$message.success('查看计划详情');
                },
                editPlan(row) {
                    this.$message.success('编辑计划');
                },
                deletePlan(row) {
                    this.$confirm('确认删除该计划?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('删除成功');
                    });
                }
            }
        })
    </script>
</body>
</html> 